<!-- 地上层数 -->
<template>
  <div id="layer-bar" style="width: 530px; height: 400px;"></div>
</template>

<script setup>
import { reactive, onMounted, watch } from "vue";
import * as echarts from "echarts";
import { useStore } from "@/store/useStore";

const store = useStore()
const options = reactive({
  title: {
    text: '地上层数统计',
    left: '16'
  },
  tooltip: {
    trigger: 'item'
  },
  toolbox: {
    show: true,
    //orient: 'vertical',
    left: 'right',
    top: 'top',
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      show: true,
      interval: 0,
      width: 120,
      overflow: "breakAll",
    },
    data: ['低层（1~3层）', '多层（4~6层）', '中高层（7~9层）', '高层（10层及以上）']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [],
      // tooltip: {
      //   valueFormatter: function (value) {
      //     return value + ' 栋';
      //   }
      // },
      type: 'bar',
      barWidth: '40%', // 柱子宽度占容器 25%
      barGap: '0'
    }
  ]
})

let myChart = null

watch([() => store.layerByData, () => store.layerDataKey], ([val1, val2]) => {
  myChart.dispose();
  // 定义排序规则
  const sortOrder = ['低层', '多层', '中高层', '高层'];

  // 创建一个映射对象以快速查找排序索引
  const orderMap = new Map(sortOrder.map((type, index) => [type, index]));

  // 按照自定义顺序排序数据
  val1[val2].sort((a, b) => orderMap.get(a.cs_type) - orderMap.get(b.cs_type));
  options.series[0].data = val1[val2].map(item => store.layerDataKey === 'areas' ? (item.value / 10000).toFixed(2) : item.value);
  options.series[0].tooltip = {
    valueFormatter: function(value) {
      if (store.layerDataKey === 'areas') {
        return value + ' 万㎡';} else {return value + ' 栋';}
    }
  };
  myChart = echarts.init(document.getElementById("layer-bar"))
  myChart.setOption(options)
})

onMounted(() => {
  myChart = echarts.init(document.getElementById("layer-bar"))
  myChart.setOption(options)
})
</script>

<style scoped></style>
